@import "./mixins/mixin.scss";

@include b(popover) {
    --popover-tooltip-bg: rgba(0, 0, 0, 0.75);
    --popover-tooltip-fc: rgb(236, 234, 234);
    --popover-arrow-height: 8px;
    --popover-arrow-offset: 10px;
    --bezier: cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: inline-block;

    @include e(arrowwrap) {
        position: absolute;
        overflow: hidden;
        pointer-events: none;

        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        bottom: auto;
        top: 100%;
        height: var(--popover-arrow-height);
    }

    @include e(arrow) {
        transition: background-color 0.3s var(--bezier);
        position: absolute;
        display: block;
        width: calc(var(--popover-arrow-height) * 1.414);
        height: calc(var(--popover-arrow-height) * 1.414);
        box-shadow: 0 0 8px 0 rgb(0 0 0 / 12%);
        background-color: var(--popover-tooltip-bg);
        pointer-events: all;
        top: calc(-0.707 * var(--popover-arrow-height));
        transform: translateX(calc(-0.707 * var(--popover-arrow-height))) rotate(45deg);

    }

    @include e(tooltipbg) {
        box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 6px -4px,
            rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px;
        position: relative;
        background-color: var(--popover-tooltip-bg);
        padding: var(--space-size-default);

        border-radius: var(--border-radius-size-medium);
        line-height: 1.125;
        color: var(--popover-tooltip-fc);
        font-size: var(--text-size-small);

        @include when(top-start) {
            bottom: 100%;
            width: 100%;


            .m-popover__arrow {
                top: calc(-0.707 * var(--popover-arrow-height));
                transform: translateX(calc(0.707 * var(--popover-arrow-height))) rotate(45deg);
                left: var(--popover-arrow-offset);
            }
        }

        @include when(top) {
            bottom: 100%;
            width: 100%;

            .m-popover__arrow {
                top: calc(-0.707 * var(--popover-arrow-height));
                transform: translateX(calc(-0.707 * var(--popover-arrow-height))) rotate(45deg);
                left: 50%;
            }
        }

        @include when(top-end) {
            bottom: 100%;
            width: 100%;

            .m-popover__arrow {
                top: calc(-0.707 * var(--popover-arrow-height));

                right: var(--popover-arrow-offset);
            }
        }

        @include when(left-start) {
            top: 0;

            width: 100%;
            height: 100%;
            left: -10px;

            .m-popover__arrowwrap {


                height: 100%;

                top: 0;
                bottom: 0;
                left: 100%;
                right: auto;
                width: var(--popover-arrow-height);
            }

            .m-popover__arrow {
                transform: translateX(calc(-0.707 * var(--popover-arrow-height))) rotate(135deg);
                top: calc(0.707 * var(--popover-arrow-height));

                right: 0;
            }
        }

        @include when(left) {
            top: 0;

            width: 100%;
            min-height: 100%;
            left: -10px;
            transform: translateY(-50%);

            .m-popover__arrowwrap {


                height: 100%;

                top: 0;
                bottom: 0;
                left: 100%;
                right: auto;
                width: var(--popover-arrow-height);
            }

            .m-popover__arrow {
                transform: translateX(calc(-0.707 * var(--popover-arrow-height))) translateY(calc(-0.707 * var(--popover-arrow-height))) rotate(45deg);
                top: 50%;

                right: 0;
            }
        }

        @include when(left-end) {
            top: auto;

            width: 100%;
            height: 100%;
            left: -10px;
            bottom: 0;

            .m-popover__arrowwrap {


                height: 100%;

                top: auto;
                bottom: 0;
                left: 100%;
                right: auto;
                width: var(--popover-arrow-height);
            }

            .m-popover__arrow {
                transform: translateX(calc(-0.707 * var(--popover-arrow-height))) translateY(calc(-0.707 * var(--popover-arrow-height))) rotate(135deg);
                top: auto;
                bottom: 0;

                right: 0;
            }
        }

        @include when(bottom-start) {
            bottom: 0;
            width: 100%;

            .m-popover__arrowwrap {


                width: 100%;

                bottom: 100%;
                top: auto;
                left: 0;
                right: 0;
                height: var(--popover-arrow-height);
            }

            .m-popover__arrow {

                top: calc(0.707 * var(--popover-arrow-height));

                left: var(--popover-arrow-offset);
            }
        }
        @include when(top) {
            left: -50%;
         
        }

        @include when(bottom) {
            bottom: 0;
            left: -50%;
          
            .m-popover__arrowwrap {


                width: 100%;

                bottom: 100%;
                top: auto;
                left: 0;
                right: 0;
                height: var(--popover-arrow-height);
            }

            .m-popover__arrow {

                top: calc(0.707 * var(--popover-arrow-height));
                transform: translateX(calc(-0.707 * var(--popover-arrow-height))) rotate(135deg);
                left: 50%;
            }
        }

        @include when(bottom-end) {
            bottom: 0;
            width: 100%;

            .m-popover__arrowwrap {


                width: 100%;

                bottom: 100%;
                top: auto;
                left: 0;
                right: 0;
                height: var(--popover-arrow-height);
            }

            .m-popover__arrow {

                top: calc(0.707 * var(--popover-arrow-height));
                left: auto;
                right: var(--popover-arrow-offset);
            }
        }


        @include when(right-start) {
            top: 0;

            width: 100%;
            height: 100%;
            right: -10px;

            .m-popover__arrowwrap {


                height: 100%;

                top: 0;
                bottom: 0;
                right: 100%;
                left: auto;
                width: var(--popover-arrow-height);
            }

            .m-popover__arrow {
                transform: translateX(calc(0.707 * var(--popover-arrow-height))) rotate(135deg);
                top: calc(0.707 * var(--popover-arrow-height));

                left: 0;
            }
        }

        @include when(right) {
            top: 0;

            width: 100%;
            min-height: 100%;
            right: -10px;
            transform: translateY(-50%);

            .m-popover__arrowwrap {


                height: 100%;

                top: 0;
                bottom: 0;
                right: 100%;
                left: auto;
                width: var(--popover-arrow-height);
            }

            .m-popover__arrow {
                transform: translateX(calc(0.707 * var(--popover-arrow-height))) translateY(calc(-0.707 * var(--popover-arrow-height))) rotate(45deg);
                top: 50%;

                left: 0;
            }
        }

        @include when(right-end) {
            top: auto;

            width: 100%;
            height: 100%;
            right: -10px;
            bottom: 0;

            .m-popover__arrowwrap {


                height: 100%;

                top: auto;
                bottom: 0;
                right: 100%;
                left: auto;
                width: var(--popover-arrow-height);
            }

            .m-popover__arrow {
                transform: translateX(calc(0.707 * var(--popover-arrow-height))) translateY(calc(-0.707 * var(--popover-arrow-height))) rotate(135deg);
                top: auto;
                bottom: 0;

                left: 0;
            }
        }
    }

    @include e(tooltip) {
        // var(--space-size-mini)

        z-index: 998;


        position: absolute;



        bottom: 100%;
        width: 100%;
        margin-bottom: var(--popover-arrow-height);
        @include when(top-end) {
            left:auto;
            right: 0;
          

        }
        @include when(left) {
            right: 100%;
            top: 50%;


        }

        @include when(left-start) {
            right: 100%;
            top: 0;
            bottom: auto;

        }

       

        @include when(left-end) {
            right: 100%;
            top: auto;
            bottom: 0;
            margin-bottom: 0;

        }

        @include when(bottom-start) {
            left: 0;
            top: 100%;
            bottom: auto;
            margin-top: var(--popover-arrow-height);
            margin-bottom: 0;
        }
        @include when(top) {
            left: 50%;
         
        }


        @include when(bottom) {
            left: 50%;
            top: 100%;
            bottom: auto;
            margin-top: var(--popover-arrow-height);
            margin-bottom: 0;
        }

        @include when(bottom-end) {
            right:0;
            top: 100%;
            bottom: auto;
            margin-top: var(--popover-arrow-height);
            margin-bottom: 0;
        }

        @include when(right) {
            left: 100%;
            top: 50%;


        }

        @include when(right-start) {
            left: 100%;
            top: 0;
            bottom: auto;

        }

       

        @include when(right-end) {
            left: 100%;
            top: auto;
            bottom: 0;
            margin-bottom: 0;

        }
    }

    .opacity-enter-active {
        animation: opacity-in 0.3s;
    }

    .opacity-leave-active {
        animation: opacity-in 0.3s reverse;
    }

    @keyframes opacity-in {
        0% {
            opacity: 0;

        }


        100% {
            opacity: 1;
        }
    }


}